<template>
  <div class="preview-Article">
    <!-- 标题 -->
    <h2 class="title" v-html="articleinfo.title"></h2>
    <!-- 录入时间/录入人/浏览次数 -->
    <div class="entry">
      <span>{{
        articleinfo.createTime | parseTimeByString('{y}-{m}-{d} {h}:{i}:{s}')
      }}</span>
      <span>{{ enterOne }}</span>
      <span>
        <i class="el-icon-view"></i>
        {{ visits }}
      </span>
    </div>
    <!-- 文章内容 -->
    <div class="content" v-html="articleinfo.articleBody"></div>
  </div>
</template>
<script>
import { detail } from '../../api/hmmm/articles'
export default {
  name: 'previewArticle',
  props: {
    articleid: {
      type: [String, Number],
      required: true
    },
    enterOne: {
      type: String,
      required: true
    },
    visits: {
      type: [String, Number],
      required: true
    }
  },
  components: {},
  data() {
    return {
      articleinfo: {}
    }
  },
  computed: {},
  watch: {},
  methods: {
    /** 获取文章详情 **/
    async GetArticleDetails() {
      try {
        const { data: res } = await detail({
          id: this.articleid
        })
        console.log(res)
        this.articleinfo = res
      } catch (error) {
        console.log('获取数据失败')
      }
    }
  },
  created() {
    this.GetArticleDetails()
  },
  mounted() {}
}
</script>
<style lang="less" scoped>
.entry {
  color: #95979a;
  font-size: 14px;
  /deep/ span {
    margin-right: 15px;
  }
}
.content {
  margin: 10px;
  background-color: #f5f5f5;
  border-top: 1px dashed #95979a;
  /deep/ .ql-align-center {
    img {
      width: 100%;
    }
  }
}
</style>
